<!--
 * @Author: wu07 1732042133@qq.com
 * @Date: 2023-01-31 16:35:52
 * @LastEditors: wu07 1732042133@qq.com
 * @LastEditTime: 2023-02-01 16:44:53
 * @FilePath: \recruitApp\recruitApp\src\pages\user\Me\Resume.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%Az
-->
<!-- 视图层 -->
<template>
  <div class="body">
    <van-nav-bar
      title="在线简历"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="message">
      <span>基础信息</span>
      <div>
        <span>{{ arr.name }}</span>
        <div><img :src="arr.url" /><van-icon name="arrow" /></div>
      </div>
      <div>
        <span>{{ arr.gender }}</span>
        <span>|</span>
        <span>{{ arr.degree }}</span>
        <span>|</span>
        <span>{{ arr.iphone }}</span>
      </div>
    </div>
    <div class="job">
      <div class="intention">
        <span>求职意向</span>
      </div>
      <div v-for="(value, index) in arr1" :key="index" class="functions">
        <div class="left">
          <div>
            <span>职能：{{ value.name }}</span
            ><span>{{ value.money }}</span>
          </div>
          <span>工作地点：{{ value.place }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="experience">
      <div class="history">
        <span>工作经验（实习经验）</span>
      </div>
      <div class="content" v-for="(item, index) in arr2" :key="index">
        <div class="firm">
          <span>{{ item.firm }}</span> <van-icon name="arrow" />
        </div>
        <span>{{ item.posts }}</span>
        <span>{{ item.time }}</span>
        <div class="part">
          <p>内容：{{ item.content }}</p>
        </div>
      </div>
    </div>
    <div class="educated">
      <div class="qualifications">
        <span>教育经历</span>
      </div>
      <div class="content" v-for="(item, index) in arr3" :key="index">
        <div class="school">
          <span>{{ item.school }}</span> <van-icon name="arrow" />
        </div>
        <span>{{ item.time }}</span>
        <div class="degree">
          <span>{{ item.subject }}</span>
          <span>{{ item.degree }}</span>
        </div>
      </div>
    </div>
    <div class="certificate">
      <div class="cert"><span>资格证书</span><van-icon name="add-o" /></div>
      <div class="content">
        <div class="credentials" v-for="(value, index) in arr4" :key="index">
          {{ value }}
        </div>
      </div>
    </div>
  </div>
</template>
  <!-- 逻辑层 -->
  <script setup>
import { ref } from "vue";
import img from "../../assets/images/u616.png";
// 导入useRouter方法
import { useRouter } from "vue-router";
const router = useRouter();
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
const arr = ref({
  name: "刘豆芽",
  url: img,
  gender: "女",
  degree: "本科",
  iphone: "13469113637",
});
const arr1 = ref([{ name: "UI设计图", money: "10-15k", place: "南京" }]);
const arr2 = ref([
  {
    firm: "强强科技有限公司",
    posts: "注册会计师",
    time: "2009.09-2021.01",
    content: "工作内容工作内容工作内容工作内容工作内容工作内容工作内容工作内容",
  },
  {
    firm: "强强科技有限公司",
    posts: "UI设计师",
    time: "2009.09-2021.01",
    content: "工作内容工作内容工作内容工作内容工作内容工作内容工作内容工作内容",
  },
  {
    firm: "强强科技有限公司",
    posts: "大数据分析师",
    time: "2009.09-2021.01",
    content: "工作内容工作内容工作内容工作内容工作内容工作内容工作内容工作内容",
  },
]);
const arr3 = ref([
  {
    school: "广东科技大学",
    time: "2018.08-2021.09",
    subject: "计算机系",
    degree: "本科",
  },
  {
    school: "广东科技大学",
    time: "2018.08-2021.09",
    subject: "会计系",
    degree: "本科",
  },
]);
const arr4 = ref(["英语四级", "计算机二级", "Cisco思科认证"]);
</script>
  <!-- 样式层 -->
  <style  scoped>
.body {
  background-color: #f2f2f2;
}
.message {
  width: 100%;
  padding-top: 2.6667vw;
  background-color: #fff;
  margin-bottom: 4vw;
  padding-bottom: 2.6667vw;
}
.message > span {
  margin-left: 5.3333vw;
  font-weight: bold;
}
.message > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.message > div:nth-child(2) div {
  display: flex;
  align-items: center;
}
.message div:nth-child(2) img {
  width: 13.3333vw;
}

.message > div:nth-child(3) {
  width: 90%;
  margin: 0 auto;
}
.job {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 4vw;
}
.intention {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  padding-top: 2.6667vw;
}
.intention span {
  font-weight: bold;
}

.intention .van-icon {
  font-size: 5.3333vw;
}

.functions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  padding: 4vw 0;
  border-bottom: 2px solid #e4e4e4;
}
.left {
  width: 60%;
}
.left div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.6667vw;
}
.experience {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 4vw;
}
.history {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  padding-top: 2.6667vw;
}
.history span {
  font-weight: bold;
}

.history .van-icon {
  font-size: 5.3333vw;
}

.experience .content {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 4.6667vw;
  border-bottom: 1px solid #e4e4e4;
}

.content .firm {
  display: flex;
  justify-content: space-between;
  margin: 2.6667vw 0;
}
.content span:nth-child(3) {
  margin: 2.6667vw 0;
}
.part {
  background-color: #f2f2f2;
  color: #999999;
}
.part p {
  padding: 2.6667vw 1.6vw;
}

.educated {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 4vw;
}
.qualifications {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  padding-top: 2.6667vw;
}
.qualifications span {
  font-weight: bold;
}

.qualifications .van-icon {
  font-size: 5.3333vw;
}

.educated .content {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 4.6667vw;
  border-bottom: 1px solid #e4e4e4;
}
.educated .content .school {
  display: flex;
  justify-content: space-between;
  margin: 2.6667vw 0;
}
.educated .content .degree {
  margin-top: 2.6667vw;
}
.educated .content .degree span:nth-child(1) {
  margin-right: 5.3333vw;
}
.certificate {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 4vw;
}
.certificate .cert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  padding-top: 2.6667vw;
}
.cert span {
  font-weight: bold;
}

.cert .van-icon {
  font-size: 5.3333vw;
}
.certificate .content {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
}
.certificate .content .credentials {
  width: 30%;
  background-color: #e4e4e4;
  padding: 1.3333vw 0.5333vw;
  text-align: center;
  margin-top: 5.3333vw;
}
</style>